<template>
  <base-option :selected="selected" :field-config="fieldConfig" :form-config="formConfig">
    <template #default="{ hideOptions }">
      <el-form-item v-if="fieldConfig.append !== undefined && hideOptions('append')" label="计算单位">
        <template #label>
          <div>
            计算单位
            <el-popover placement="top-start" title="" :width="200" trigger="hover" content="单位天，最小单位0.5天。">
              <template #reference>
                <el-icon><QuestionFilled /></el-icon>
              </template>
            </el-popover>
          </div>
        </template>
        <el-select v-model="fieldConfig.append">
          <el-option label="天" value="天" />
          <el-option label="小时" value="小时" />
        </el-select>
      </el-form-item>

      <el-form-item v-show="fieldConfig.selectStart !== undefined && hideOptions('selectStart')" label="开始日期">
        <template #label>
          <div>
            开始日期
            <el-popover
              placement="top-start"
              title=""
              :width="200"
              trigger="hover"
              content="配套两个日期组件使用，请选择开始日期组件。"
            >
              <template #reference>
                <el-icon><QuestionFilled /></el-icon>
              </template>
            </el-popover>
          </div>
        </template>
        <el-select v-model="fieldConfig.selectStart" placeholder="请选择开始日期">
          <el-option
            v-for="item in selectList"
            :key="item.options.name"
            :label="item.options.label"
            :value="item.options.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-show="fieldConfig.selectEnd !== undefined && hideOptions('selectEnd')" label="结束日期">
        <template #label>
          <div>
            结束日期
            <el-popover
              placement="top-start"
              title=""
              :width="200"
              trigger="hover"
              content="配套两个日期组件使用，请选择结束日期组件。"
            >
              <template #reference>
                <el-icon><QuestionFilled /></el-icon>
              </template>
            </el-popover>
          </div>
        </template>
        <el-select v-model="fieldConfig.selectEnd" placeholder="请选择结束日期">
          <el-option
            v-for="item in selectList"
            :key="item.options.name"
            :label="item.options.label"
            :value="item.options.name"
          />
        </el-select>
      </el-form-item>

      <el-form-item v-if="fieldConfig.workdayMode !== undefined && hideOptions('workdayMode')" label="核算方式">
        <template #label>
          <div>
            核算方式
            <el-popover
              placement="top-start"
              title=""
              :width="200"
              trigger="hover"
              content="按工作日计算时长，仅计算有效工时。"
            >
              <template #reference>
                <el-icon><QuestionFilled /></el-icon>
              </template>
            </el-popover>
          </div>
        </template>
        <el-select v-model="fieldConfig.workdayMode">
          <el-option label="按自然日计算时长" :value="0" />
          <el-option label="按工作日计算时长" :value="1" />
        </el-select>
      </el-form-item>

      <el-form-item label="每日工作时间段" style="display: flex; align-items: flex-start">
        <el-col :span="11">
          <el-time-select
            v-model="fieldConfig.workTime[0].start"
            placeholder="开始时间"
            :max-time="fieldConfig.workTime[0].end"
            start="06:00"
            step="00:10"
            end="20:00"
            :clearable="false"
            prefix-icon=""
          />
        </el-col>
        <el-col :span="2" style="display: flex; justify-content: center">
          <span style="color: #6b7280">-</span>
        </el-col>
        <el-col :span="11">
          <el-time-select
            v-model="fieldConfig.workTime[0].end"
            placeholder="结束时间"
            :min-time="fieldConfig.workTime[0].start"
            start="06:00"
            step="00:10"
            end="20:00"
            :clearable="false"
            prefix-icon=""
          />
        </el-col>
        <div style="width: 100%; height: 8px" />
        <el-col :span="11">
          <el-time-select
            v-model="fieldConfig.workTime[1].start"
            placeholder="开始时间"
            :min-time="fieldConfig.workTime[0].end"
            :max-time="fieldConfig.workTime[1].end"
            start="06:00"
            step="00:10"
            end="20:00"
            :clearable="false"
            prefix-icon=""
          />
        </el-col>
        <el-col :span="2" style="display: flex; justify-content: center">
          <span style="color: #6b7280">-</span>
        </el-col>
        <el-col :span="11">
          <el-time-select
            v-model="fieldConfig.workTime[1].end"
            placeholder="结束时间"
            :min-time="fieldConfig.workTime[1].start"
            start="06:00"
            step="00:10"
            end="20:00"
            :clearable="false"
            prefix-icon=""
          />
        </el-col>
      </el-form-item>

      <el-form-item label="法定节假日">
        <el-button type="info" link @click="dialogHolidays = true">
          <el-icon><Edit /></el-icon>
          <span>编辑</span>
        </el-button>
      </el-form-item>
      <el-dialog
        v-model="dialogHolidays"
        title="法定节假日"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        destroy-on-close
      >
        <code-editor v-model="holidays" mode="json" />
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="saveHolidays">确定</el-button>
            <el-button type="primary" @click="dialogHolidays = false">关闭</el-button>
          </span>
        </template>
      </el-dialog>
      <el-form-item label="调休工作日">
        <el-button type="info" link @click="dialogWorkdays = true">
          <el-icon><Edit /></el-icon>
          <span>编辑</span>
        </el-button>
      </el-form-item>
      <el-dialog
        v-model="dialogWorkdays"
        title="调休工作日"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        destroy-on-close
      >
        <code-editor v-model="workdays" mode="json" />
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="saveWorkdays">确定</el-button>
            <el-button type="primary" @click="dialogWorkdays = false">关闭</el-button>
          </span>
        </template>
      </el-dialog>
    </template>
  </base-option>
</template>

<script setup>
import { ref, toRefs, computed } from 'vue'
import baseOption from './base-option.vue'
import propsDefinition from './props'
const props = defineProps(propsDefinition)
const { selected, widgetList, fieldConfig, formConfig } = toRefs(props)

const dialogHolidays = ref(false)
const dialogWorkdays = ref(false)
const newHolidays = ref(null)
const newWorkdays = ref(null)
const holidays = computed({
  get() {
    return JSON.stringify(props.fieldConfig.holidays, null, '\t')
  },
  set(value) {
    try {
      const arr = JSON.parse(value)
      if (Array.isArray(arr)) {
        newHolidays.value = arr
      }
    } catch (error) {
      console.log(error)
    }
  }
})
const workdays = computed({
  get() {
    return JSON.stringify(props.fieldConfig.workdays, null, '\t')
  },
  set(value) {
    try {
      const arr = JSON.parse(value)
      if (Array.isArray(arr)) {
        newWorkdays.value = arr
      }
    } catch (error) {
      console.log(error)
    }
  }
})

const saveHolidays = () => {
  if (newHolidays.value) {
    Object.assign(props.fieldConfig, { holidays: newHolidays.value })
  }
  dialogHolidays.value = false
}

const saveWorkdays = () => {
  if (newWorkdays.value) {
    Object.assign(props.fieldConfig, { workdays: newWorkdays.value })
  }
  dialogWorkdays.value = false
}

const selectList = computed(() => {
  const list = widgetList.value.filter((m) => m.type === 'date')
  const cards = widgetList.value.filter((m) => m.type === 'card')
  cards.forEach((e) => {
    const items = e.components.filter((m) => m.type === 'date')
    list.push(...items)
  })
  return list
})
</script>
